<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/Utils.js"></script>
</head>

<body>

    <div class="div1"></div>

    <script>

        // StyleSheet是css列表

        // if(document.styleSheets.length===0){
        //     var style=document.createElement("style");
        //     document.head.appendChild(style);

        // 如果列表的长度为0，则创建一个style标签，把style标签放入head中


        // IE都支持
        // styleSheet.addRule(".div1","width:50px;height:50px;background-color:red",0);
        //  styleSheet.addRule(".div1:hover","background-color:blue",1);

        // IE9以上支持
        // styleSheet.insertRule(".div1 {width:50px;height:50px;background-color:red}",0)


        // ----------------------------------------------------------------------

        // 设置CSS样式：
        // setCSS();
        // function setCSS() {
        // if(document.styleSheets.length===0){
        //     var style=document.createElement("style");
        //     document.head.appendChild(style);
        //  }
        // var styleSheet = document.styleSheets[document.styleSheets.length - 1];     
        // styleSheet.addRule(".div1","width:50px;height:50px;background-color:red",0);
        // styleSheet.addRule(".div1:hover","background-color:blue",1);

        //  }

        // ------------------------------------------------------------------


        Utils.setCss({
            ".div1":{
                width:100,
                height:"50px",
                backgroundColor:"red"
            },
            ".div1:hover":{
                backgroundColor:"blue"
            }
        })






// -----------------------------------------------------------------------------------------

        // setCss(`
        //     .div1{
        //         width:50px;
        //         height:50px;
        //         background-color:red;
        //     }
        //     .div1:hover{
        //         background-color:blue;
        //     }
        // `)
// 由正则表达式建立









    </script>
</body>

</html>